@import "common";
body{
   min-width:320px;
   width:15rem;
   margin:0 auto;
// body无法设置宽高
// 那这个设置干嘛用的？
  
   background-color: bisque;
   font-family:Arial, Helvetica, sans-serif;
}

@fontBase:50;
.search-content{
    min-width:320px;
    width:15rem;
    height:(88rem/@fontBase);
    background-color: #ffc001;
    position:fixed;
    // :z-index属性只作用在被定位了的元素上。
    //所以如果你在一个没被定位的元素上使用z-index的话，是不会有效果的
    z-index: 999;
    top:0;
    left:50%;
    transform:translateX(-50%);
    // 采用flex布局，所以能在一行显示
    display:flex;
    .nav{
        width:(44rem/@fontBase);
        height:(70rem/@fontBase);
        margin:(11rem / @fontBase) (10rem / @fontBase ) (10rem / @fontBase) ( 10rem / @fontBase);
        // background: url(../suning/images/classify.png) no-repeat ;
        img{
            width:(44rem/@fontBase);
            height:(70rem/@fontBase);
           
        }

    }
    .search{
       
        // flex:1什么意思？
        flex:1;
        // background-color: deeppink;
        input{
            // 增加高度
            height: (66rem/@fontBase);
            // box-sizing: border-box;
            // 增加长度
            width:90%;
            outline: none;
            border:none;
            // border-radius: 10%;
            border-radius: (33rem / @fontBase);
            margin-top:  (10rem / @fontBase);
                color: #aab2bd;
                /* placeholder字体大小 */
                font-size:(25rem/@fontBase) ;
                padding-left: (35rem/@fontBase);
            font-size: (35rem/@fontBase);
            // &::-webkit-input-placeholder {
            //     /* placeholder颜色 */
            //     color: #aab2bd;
            //     /* placeholder字体大小 */
            //     font-size:(25rem/@fontBase) ;
            //     padding-left: (35rem/@fontBase) ;
               
            // }
        }
    }
    
    .login{
        box-sizing: border-box;
        width:(75rem/@fontBase);
        height:(70rem/@fontBase);
        margin:(10rem/@fontBase);
        // background-color: aqua;
        font-size: (20rem/@fontBase);
        padding-top:(25rem/@fontBase);
        // 文字不能在一行显示？主要是因为flex布局剩下的空间太小了
        text-align: center;
        // line-height: (70rem/@fontBase);
        color:#fff;
        text-decoration: none;

    }
 }
    


    .banner{
        // banner不居中
        position: absolute;
        left:50%;
        top:(88rem/@fontBase);
        transform:translateX(-50%);
        background-color: pink;
        width:15rem;
        height:(368rem/@fontBase);
       
        img{
            width: 100%;
            height: 100%;
        }

    }
    .ad{
        display:flex;
        width:15rem;
        position: absolute;
        left:50%;
        top:(456rem/@fontBase);
        transform:translateX(-50%);
        a{
            flex:1;
            img{
                width:100%;
            }
        }

    }
    // .nav{
    //     display:flex; 
    //     width:15rem;
    //     position: absolute;
    //     left:50%;
    //     top:(700rem/@fontBase);
    //     transform:translateX(-50%);
    //     a{
    //         flex:1;
    //         flex-wrap: wrap;
    //         img{
    //             width:100%;
    //         }
    //     }
    // }
    
nav{
    width: 15rem;
        position: absolute;
        left:50%;
        top:(700rem/@fontBase);
        transform:translateX(-50%);
    a{
        float:left;
        width: (150rem/@fontBase);
        height: (140rem/@fontBase);
        text-align: center;
        text-decoration: none;
        img {
            display: block;
            width: (82rem / @fontBase);
            height: (82rem / @fontBase);
            margin: (10rem / @fontBase) auto 0;
        }
        span {
            font-size: (25rem / @fontBase);
            color: #333;
        }
    }
}
